<template>
	<view class="container">
		<view class="mailbox-menu" @click="ClickMenuMargin" v-if="IsOpenMenu">
			<view class="mailbox-menu-box" >
				<view v-for="(item,index) in Menu" :key="index">
					<view class="mailbox-menu-box-item" @click="ClickMenuBtn(index)">{{item}}</view>
					<view class="mailbox-menu-box-line" v-if="index < Menu.length -1"></view>
				</view>
			</view>
		</view>
		<view class="mailbox-items" v-if="MailBox.length !== 0">
			<view v-for="(item,index) in MailBox" :key="index">
				<view class="mailbox-items-box" @longpress="WhenLongPress(index)" @click="GotoChatPage(item)">
					<image class="mailbox-items-box-img" src="../../static/background.png"></image>
					<view class="mailbox-items-box-radio" v-if="item.newNum !== 0"></view>
					<view class="mailbox-items-box-name">{{item.name}}</view>
					<view class="mailbox-items-box-msg">{{item.msg}}</view>
					<view class="mailbox-items-box-newNum" v-if="item.newNum !== 0">{{item.newNum}}</view>
					<view class="mailbox-items-box-time">{{item.time}}</view>
				</view>
				<view class="mailbox-items-line"></view>
			</view>
		</view>
		<view class="mailbox-empty" v-else>
			<image class="mailbox-empty-img" src="../../static/mail.png"></image>
			<view class="mailbox-empty-text">暂无消息</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	
	export default {
		data() {
			return {
				// //邮箱内容数组，用于储存聊天的用户与信息数据
				// //元素为对象：{图片img,用户名name,新信息数newNum,最近消息msg,最近消息时间time}
				// MailBox : [{img:'',name:'电棍',newNum:0,msg:'韭菜盒子，贼几把好吃',time:'1月2日'},
				// {img:'',name:'炫神',newNum:1,msg:'昊龙昊龙，在世真龙',time:'3月2日'},
				// {img:'',name:'山泥若',newNum:2,msg:'没点关注的点点关注',time:'4月5日'}],
				//是否触发菜单
				IsOpenMenu : false,
				//长按菜单内容
				Menu : ['置顶该聊天','删除该聊天','不显示该聊天','聊天设置'],
				//当前选择的邮箱内容编号
				NowChoose: -1,
			};
		},
		computed : {
			...mapState('m_mail',['MailBox']),
		},
		onLoad () {
			if(this.MailBox.length === 0){
				var mb = [{img:'',name:'电棍',newNum:0,msg:'韭菜盒子，贼几把好吃',time:'1月2日'},
					{img:'',name:'炫神',newNum:1,msg:'昊龙昊龙，在世真龙',time:'3月2日'},
					{img:'',name:'山泥若',newNum:2,msg:'没点关注的点点关注',time:'4月5日'}];
				this.StoreMailBox(mb);
			}
		},
		methods : {
			...mapMutations('m_mail',['StoreMailBox','UpMessageUnit','DeleteMessageUnit']),
			//当长按时触发函数
			WhenLongPress(index) {
				if(!this.IsOpenMenu){
					this.IsOpenMenu = true;
					this.NowChoose = index;
					console.log("当前操作的邮箱内容编号为：" + index);
				}
			},
			//当你点击菜单按钮时触发
			ClickMenuBtn(index){
				console.log("当前内容为：" + this.Menu[index]);
				//PS:改变这些东西的时候，最好跟后端对接一下，以免刷新页面后啥都没变
				if(this.NowChoose !== -1)
				switch(index){
					case 0: {
						this.UpMessageUnit(this.NowChoose);
						break;
					}
					case 1: {
						this.DeleteMessageUnit(this.NowChoose);
						break;
					}
					case 2: {
						//效果未知，暂定为在前端删除
						this.DeleteMessageUnit(this.NowChoose);
						break;
					}
					case 3: {
						//效果未知
						break;
					}
				}
			},
			//当你点击菜单以外的地方时触发
			ClickMenuMargin(){
				this.IsOpenMenu = false;
			},
			//点击信息块时传送至对应聊天界面
			GotoChatPage(e){
				uni.navigateTo({
					url:'/subpkg/chat/chat?chatName=' + e.name,
				})
			}
		}
	}
</script>

<style lang="scss">
.container{
	background-color: rgba(235, 236, 237, 0.4);
	height: 1450rpx;
	
	.mailbox-menu {
		position:absolute;
		margin-top: -50px;
		height: 1450rpx;
		width: 100%;
		background-color: rgba(140, 137, 137, 0.5);
		z-index: 2;
		
		.mailbox-menu-box {
			position:absolute;
			margin-top: 500rpx;
			margin-left: 15%;
			height: 500rpx;
			width: 70%;
			background-color: white;
			border-radius: 7px;
			
			.mailbox-menu-box-item {
				height: 90rpx;
				width: 100%;
				text-align: center;
				padding-top: 35rpx;
				font-weight: 500;
				font-size: 18px;
			}
			
			.mailbox-menu-box-line {
				height: 1px;
				width: 100%;
				background-color: rgba(22, 31, 61, 0.4);
			}
		}
	}
	
	.mailbox-items {
		font-size: 10px;
		
		.mailbox-items-box {
			height: 150rpx;
			width: 100%;
			margin-left: 5%;
			display: flex;
			
			.mailbox-items-box-img {
				margin-top: 20rpx;
				margin-left: 10rpx;
				width: 130rpx;
				height: 130rpx;
				border-radius: 50px;
			}
			
			.mailbox-items-box-radio {
				position: absolute;
				margin-top: 30rpx;
				margin-left: 110rpx;
				width: 20rpx;
				height: 20rpx;
				border: 2px solid white;
				border-radius: 10px;
				background-color: rgba(233, 68, 106, 1);
			}
			
			.mailbox-items-box-name {
				position: absolute;
				margin-top: 40rpx;
				margin-left: 170rpx;
				font-size: 16px;
			}
			
			.mailbox-items-box-newNum {
				position: absolute;
				margin-top: 50rpx;
				margin-left: 630rpx;
				padding-left: 10rpx;
				font-size: 13px;
				width: 25rpx;
				height: 35rpx;
				border-radius: 10px;
				background-color: rgba(233, 68, 106, 1);
				color:white
			}
			
			.mailbox-items-box-msg {
				position: absolute;
				margin-top: 110rpx;
				margin-left: 170rpx;
				color: rgba(22, 31, 61, 0.4);
			}
			
			.mailbox-items-box-time {
				position: absolute;
				margin-top: 110rpx;
				margin-left: 570rpx;
				width: 100rpx;
				text-align: right;
				color: rgba(22, 31, 61, 0.4);
			}
		}
		
		.mailbox-items-line {
			margin-left: 5%;
			margin-top : 10px;
			height: 1px;
			width: 90%;
			background-color: rgba(22, 31, 61, 0.4);
		}
	}
	
	.mailbox-empty {
		text-align: center;
		padding-top: 45%;
		
		.mailbox-empty-img {
			width: 100%;
			height: 400rpx;
		}
		
		.mailbox-empty-text{
			color:rgba(196, 196, 196, 1);
		}
	}
}
</style>
